<template>
  <div id="index">
    <div class="top">
      <span>2018年钉钉定制服务商初级认证考试</span>
      <a class="submit" @click="submit">保存</a>
    </div>
    <div class="container">
      <div class="left">
        <editor v-on:update="update" v-on:scroll="scroll" ref='editor'/>
      </div>
      <div class="right">
        <eEender :renderData="renderData" :scrollPercent="per"/>
      </div>
    </div>
  </div>
</template>

<script>
  import editor from './editor'
  import eEender from './render'
  import axios from 'axios';
export default {
  name: 'Index',
  components:{
    editor,
    eEender,
  },
  data(){
    return {
      renderData:{},
      per:0,
      postData:[],
    }
  },
  methods:{
    update(data){
      this.renderData = data;
    },
    scroll(per){
      this.per = per;
    },
    submit() {
      let data = this.formatData();
      console.log(this.$refs.editor.checkData());
      return false;
      axios.post('/url', data)
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    formatData(){
      let res = [];
      for (var i =  0; i < this.renderData.questions.length; i++) {
        let q = this.renderData.questions[i];
        let post = {};
        post.title = q.title;
        post.score = 0;
        post.analysis = q.answerExplain?q.answerExplain:"";
        post.choices = q.options?q.options:null;
        post.difficulty = q.difficulty == "易"?"simple":q.difficulty == "中"?"normal":"difficulty";
        let answerToIndex = function(answer) {
          let answerArray = answer.split("");
          let res = [];
          for (var i = answerArray.length - 1; i >= 0; i--) {
            let temp = answerArray[i];
            res.push(temp.charCodeAt()-65);
          }
          return res;
        };
        switch(q.questionType){
          case "单选":
            post.type = "single_choice";
            post.answer = answerToIndex(q.refAnswer.optAnswer);
            break;
          case "多选":
            post.type = "choice";
            post.answer = answerToIndex(q.refAnswer.optAnswer);
            break;
          case "不定项":
            post.type = "uncertain_choice";
            post.answer = answerToIndex(q.refAnswer.optAnswer);
            break;
          case "判断":
            post.type = "determine";
            post.answer = q.refAnswer.optAnswer == "A"?["1"]:["0"];
            break;
          case "填空":
            post.type = "fill";
            let reg = new RegExp("_+","g");
            let i = 0;
            post.title = post.title.replace(reg,function(a,b){
              let str = "[["+(q.refAnswer.blankAnswer[i]?q.refAnswer.blankAnswer[i]:"FAIL")+"]]";
              i++;
              return str;
            });
            post.answer = null;
            post.answerType = q.answerStyle == "完全一致"?1:q.answerStyle == "仅顺序不一致"?2:3;
            break;
          case "问答":
            post.type = "essay";
            post.answer = [q.refAnswer.textAnswer];
            break;
        }
        res.push(post);
      }
      console.log(res);
      return res;
    },
  },
}
</script>

<style>
  #index {
    width: 100%;
  }
  .top {
    width: 100%;
    height: 58px;
    background-color: #f5f7fa;
    text-align: center;
    line-height: 58px;
    font-size: 24px;
    color: #222;
    font-weight: bold;
    min-width: 1080px;
    overflow-x: hidden;
  }
  .container {
    display: flex;
    background: #f5f7fa;
    flex-direction: row;
    padding: 0 30px;
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    min-width:1080px;
  }
    .left {
      width: 50%;
    }
    .right {
      width: 50%;
      height: 100%;
    }
    .submit {
      padding: 0 20px;
      height: 50px;
      width: 118px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      text-align: center;
      line-height: 50px;
      font-size: 16px;
      background-color: #159af1;
      color: #fff;
      position: absolute;
      top: 62px;
      right: 30px;
      cursor: pointer;
      z-index: 999;
      box-sizing: border-box;
    }
</style>
